<template>
  <div class="map-wrapper">
    <mv-map
      ref="mvMap"
      :mapConfig="mapConfig"
      :mapEventType="mapEventType"
      @map-load="mapLoad"
      @point-click="pointClick"
      @map-load-event="mapLoadEvent"
    >
      <!-- 地图图例 菜单-->
      <div class="map-menu-box" v-if="componentProps.menus">
        <!-- top 容器定位 -->
        <lsd-layout-container
          v-if="componentProps.menus.topConfig"
          class="map-menu-container"
          data-title="图例菜单容器"
          direction="row"
          :left="getDomProp(componentProps.menus.left)"
          top="4%"
        >
          <mv-map-icon
            v-for="config in componentProps.menus.topConfig"
            :key="config.type"
            :iconConfig="getMenuConfig(config)"
            @layer-click="layerClick"
            @point-click="pointClick"
            @load-layer="loadLayer"
            @query-callback="queryCallback"
          ></mv-map-icon>
        </lsd-layout-container>
      </div>
      <!-- 地图通用详情弹框 -->
      <MapDialog :currentType="currentType" :currentData="currentData" ref="mapDialog"></MapDialog>
      <!-- top 容器定位 -->
      <lsd-layout-container
        v-if="videoUrl.length"
        class="map-around-cameras"
        data-title="智能侦测前后摄像机容器"
        direction="row"
        :right="getDomProp(componentProps.aroundCamera.right)"
        top="4%"
      >
        <BeforeAfterCamera :videoUrl="videoUrl" @cameraClose="cameraClose"></BeforeAfterCamera>
      </lsd-layout-container>
    </mv-map>
    <!-- 地图蒙层 -->
    <div class="cover">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
import { markRaw, getCurrentInstance, toRaw } from 'vue'
import MapDialog from './components/MapDetailDialog.vue'
import BeforeAfterCamera from './components/BeforeAfterCamera.vue'
import { getMenuConfig } from './lib/map-menu-layer'
import mapBusinessApi from './lib/map-business-api'
import baseServiceApi from '../../api/base-service'
import eventApi from '../../api/event.js'
import useComputedDistanceRow from '@/hooks/useComputedDistanceRow'
import { mapGetters } from 'vuex'
import * as authApi from '@/api/auth'
import dayjs from 'dayjs'
import useObserverScoket from '@/hooks/useObserverScoket'
import temporaryFile from './lib/temporary-file'

import { getDomProp } from '@/components/layout/utils'
import { get } from '@/utils'

// import scoktet from '@/components/socket-sdk/'

/**
 * 地图组件
 * @author 朱琦
 * @date   时间：2022/10/29
 */
const DEFAULT_PR_COLOR = 'rgba(241, 246, 250, 0.8)'
export default {
  name: 'ZhddMap',
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    MapDialog,
    BeforeAfterCamera
  },
  setup() {
    const {
      appContext: {
        config: { globalProperties }
      }
    } = getCurrentInstance()
    return {
      globalProperties
    }
  },
  data() {
    return {
      getDomProp,
      mapConfig: markRaw({
        theme: 'light',
        zoom: 7.5,
        zooms: [7, 19],
        // mapStyle: 'amap://styles/whitesmoke',
        mapStyle: 'amap://styles/43819f00d91125ab6058b980642f0e51',
        center: [119.35133, 32.956348] //  地图中心点坐标值
      }),
      videoUrl: [], // 前后两路摄像头url集合
      beforeAfterMaker: null,
      broundBaseInfo: null,
      lineInfo: null,
      videoInfo: null,
      imgInfo: null,
      businessConfig: markRaw({
        provinceBorder: true,
        areaConfig: {
          code: '320000',
          depth: 2,
          // fillColor: 'rgba(241, 246, 250, 0.6)',
          cityBorderColor: '#6D91D8', // 中国地级市边界
          strokeWidth: 1,
          zooms: [4, 9],
          provinceOutside: {
            fillColor: 'rgba(241, 246, 250, 0.8)'
            // fillOpacity: 0.9
          },
          provinceBorder: {
            borderColor: '#6D91D8',
            borderWeight: 8
          }
        }
      }),
      mapEventType: [],
      pointClickTimer: null, // 地图点位点击防抖延时器
      imageLayer: null,
      // 点击点位的数据项以及类型
      currentType: null,
      currentData: {},
      // 事件类型
      eventTypeArr: {
        TAB1: '交通事故',
        TAB2: '车辆故障',
        JEB1: '施工养护',
        TBB1: '恶劣天气',
        TDB2: '障碍物',
        TDB1: '大流量',
        JGB1: '交通管制'
      },
      getMenuConfig,
      scatterInstance: null,
      locaContainerInstance: null,
      socketInstance: null,
      observerMarker: null
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/userInfo',
      cityInfo: 'user/cityInfo'
    }),
    componentProps() {
      return this.config.componentProps || {}
    }
  },
  mounted() {
    // this.getMenuConfig()
  },
  methods: {
    /**
     * 地图初始化完成
     */
    mapLoad(map) {
      this.globalProperties.$mapSdk().pointClick = this.pointClick
      this.globalProperties.$mapSdk().showPopup = this.$refs.mapDialog.showPopup
      this.globalProperties.$mapSdk().hidePopup = this.$refs.mapDialog.hidePopup
      this.globalProperties.$mapSdk().setMapCenter = this.setMapCenter
      this.globalProperties.$mapSdk().showCameraPoint = this.showCameraPoint
      this.globalProperties.$mapSdk().cameraClose = this.cameraClose
      this.globalProperties.$mapSdk().getLineLatLonList = this.getLineLatLonList
      this.globalProperties.$mapSdk().getBaseInfoList = this.getBaseInfoList
      window._map = map

      this.init()
    },
    /**
     *  map 初始化
     */
    init() {
      // 显示江苏省边界
      this.createSatellite()
      // this.newScatterLayer()  // amap 2.0才能使用贴地呼吸点
      // this.createBreath();
      this.positionUnitCity(this.userInfo) // 显示该单位所在城市的边界
      // useObserverScoket(this.socketInstance, this)
      if (this.$route.params && this.$route.params.pageId == 'jjj') this.createconstructionLine() // 交建局创建施工点位跟路线（临时）
      if (!['jjj'].includes(this.$route.params.pageId)) this.createEventHandlePoint() // 创建事件处置点位（暂时这样展示）
    },
    /**
     * 地图绑定事件触发
     */
    mapLoadEvent(event) {
      if (event.type === 'click') {
        this.setProvince(event)
      }
    },

    /**
     * 创建图片图层
     */
    createImageLayer() {
      // const data = {
      //   url: require('./images/map-bg.png'),
      //   southWest: [115.954504, 30.408013],
      //   northEast: [122.649914, 35.349238]
      // }
      // const config = {
      //   // zooms: [8, 10],
      //   zIndex: 2
      // }
      // this.imageLayer = markRaw(this.$mapSdk().createMvMapImgLayer(data, config))
    },
    /**
     * 创建卫星图层
     */
    createSatellite() {
      this.satelliteLayer = this.$mapSdk().createMvMapSatelliteLayer({
        zooms: [17, 19]
      })
    },

    /**
     * 地图绑定 点击事件触发
     */
    setProvince(event) {
      const provinceLayer = this.$refs.mvMap.provinceLayer
      if (!provinceLayer || !provinceLayer.province) return
      const px = event.pixel
      // 拾取所在位置的行政区
      const props = provinceLayer.province.getDistrictByContainerPos(px)

      if (props) {
        const SOC = props.SOC
        if (SOC) {
          // 重置行政区样式
          provinceLayer.province.setStyles({
            // 国境线
            // nation-stroke': nationStroke,
            // 海岸线
            // 'coastline-stroke': '',
            fill: function (props) {
              return props.SOC == SOC ? DEFAULT_PR_COLOR : '#DCEDF9'
            }
          })
          updateInfo(props)
        }
      }
    },
    /**
     * 设置图例状态
     * @param {String} type 图例类型
     * @param {Boolean} isOpen 图例是否打开
     */
    setLegendStatus(type, isOpen) {
      if (!type) {
        return
      }
      if (!this.$mapSdk()) {
        return
      }
      const legend = this.$refs.mvMapMenu.$refs[type][0]
      if (isOpen) {
        // 打开图层
        legend.isChecked || legend.onIconClick()
      } else {
        // 关闭图层
        !legend.isChecked || legend.onIconClick()
      }
    },
    /**
     * 图例点击事件
     */
    layerClick(config, checked) {
      if (!checked) {
        this.$refs.mapDialog.hidePopup()
        this.$mapSdk().removeMvMapMarkerLayer(this.broundBaseInfo)
      }
    },

    /**
     * 图例 图层接口调用状态回调
     * @param {String} status
     */
    loadLayer(status, config) {
      // console.log('图层加载数据' + status)

      if (status == 'error') {
        this.$message.error('数据获取失败')
      }
    },

    /**
     * 图例 图层 地图点位 点击事件回调
     *
     *  @param e        所点击地图对象
     *  @param data     所点击点位部分详情数据
     *  @param config   所点击点位类型
     *         config.type 图层标识
     *         config.mode 图层类型  marker/polyline/point(海量点)...
     *         config.componentName 触发回调地图图层所在的组件名
     */
    pointClick(e, data, config) {
      // 防抖 防止图标重叠触发多个弹框问题
      if (this.pointClickTimer) clearTimeout(this.pointClickTimer)

      this.pointClickTimer = setTimeout(() => {
        if (config.type == 'dlsj' || config.type == 'jjjsg' || config.type == 'glsjcz') {
          data.titleName = this.eventTypeArr[data.eventType] || data.titleName
          if (data.pointSource == 'map' && this.$store.state.config.detailConfig.type) {
            // 三级弹框移除详情
            // this.$store.commit('config/SET_DETAIL_CONFIG', {
            //   type:"mapClick",
            //   data: {}
            // })
            // this.$mapSdk().removeMvMapImgLayer(this.imgInfo)
            // this.$mapSdk().removeMvMapMarkerLayer(this.broundBaseInfo)
            // this.lineInfo && this.$mapSdk().removeMvMapLineLayer(this.lineInfo)
            // this.$mapSdk().removeMvMapMarkerLayer(this.videoInfo)
            // this.getEventBaseInfo(data)
          }
        } else if (config.type === 'beforeAfterCamera') {
          // 智能侦测前后摄像机
          const hasActive = this.videoUrl.filter(i => i.resourcesId == data.resourcesId).length > 0
          if (!hasActive) this.videoUrl.push(data)
        }
        this.currentType = config.type
        this.currentData = data
        // 获取点位详情并弹框
        this.$refs.mapDialog.showPopup(config.type, data)
        this.pointClickTimer = null
      }, 200)
    },
    /**
     * 图层无model配置回调
     */
    queryCallback(res, config) {
      console.log(`${config.name}加载数据回调，返回数据：`, res)
    },

    /**
     * 移除点标记选中
     */
    removeCurrentClickMarker() {
      this.$mapSdk().setMvMapClickMarker()
    },

    // /**
    //  * 打开地图弹框
    //  */
    // openDialog(size, lnglat, offset, className) {
    //   this.$refs.mapDialog.showPopup(450, 250, 'dialog-blue', lnglat)
    // },

    /**
     * @desc 设置中心点
     */
    setMapCenter(lonLat) {
      this.$mapSdk().setMvMapCenterAndZoom(this.getCenterPath(lonLat), 13)
    },

    /**
     * @desc 获取点与路线的中心点
     * @param  lonLat {Array}
     * @returns Array
     ***/
    getCenterPath(lonLat) {
      if (!Array.isArray(lonLat)) return []
      const everyResult = lonLat.every(i => Object.prototype.toString.call(i) === '[object Array]')
      const path = everyResult ? lonLat[Math.floor(lonLat.length / 2)] : lonLat
      return [Number(path[0]), Number(path[1]) - 0.03]
    },

    /**
     * @desc 前后摄像机弹框关闭
     *
     **/
    cameraClose(index) {
      if (typeof index === 'number') {
        return this.videoUrl.splice(index, 1)
      }
      this.videoUrl = []
      this.removeCameraPoint()
    },

    /**
     * @desc 显示前后摄像机点位与弹框
     * @param  videoUrl {Array}
     *
     **/
    showCameraPoint(paths) {
      const videoUrl = paths.map((i, index) => {
        const type = i.roadSysType == 2 ? 'gl' : 'gs'
        return {
          ...i,
          icon: 'zhdd-' + type + '-sxj-active',
          path: [i.lng, i.lat],
          name: i.resourcesName,
          size: [35, 35],
          offset: [-35 / 2, -35],
          url: i.url
        }
      })
      this.videoUrl = []

      if (!videoUrl.length) return
      this.videoUrl = videoUrl

      this.beforeAfterMaker = this.$mapSdk().createMvMapMarkerLayer(videoUrl, {}, (e, data) => {
        this.pointClick(e, data, { type: 'beforeAfterCamera' })
      })
      return toRaw(this.beforeAfterMaker)
    },
    /**
     * @desc 移除前后摄像机点位与弹框
     *
     **/
    removeCameraPoint() {
      if (this.beforeAfterMaker) {
        this.$mapSdk().hideMvMapMarkerLayer(this.beforeAfterMaker)
        this.beforeAfterMaker = null
      }
    },

    /**
     * 显示该单位的城市区域
     * uesrInfo   用户信息
     **/
    positionUnitCity() {
      if (!this.$mapSdk()) return
      // 地址编码存在
      if (this.cityInfo.regionId) {
        const regionId = String(this.cityInfo.regionId).slice(0, 4) + '00'
        this.businessConfig.areaConfig.code = regionId
        mapBusinessApi.getCityAreaCode(regionId)
      }
      // 经纬度存在
      if (this.cityInfo.lon && this.cityInfo.lat) {
        this.$mapSdk().setMvMapCenterAndZoom([this.cityInfo.lon, this.cityInfo.lat], 9)
      }
      this.$mapSdk().createMvMapProvince(this.businessConfig.areaConfig)
    },

    /**
     *  创建施工点位跟路线（交建局临时展示）
     **/
    createconstructionLine() {
      const params = { roadNum: 'G2', startStake: '810.000', endStake: '847.000' }
      baseServiceApi
        .getLineLatLonList(params)
        .then(res => {
          if (res.data && res.data.length) {
            const path = res.data[0].lonLat.split(';').map(i => i.split(','))
            const centerPath = path[Math.floor(path.length / 2)]
            const lines = [
              {
                name: 'G2 K810+000-847+000 京沪高速',
                path,
                config: {
                  lineWidth: 8,
                  lineColor: '#fcb42d',
                  selectWidth: 10,
                  selectColor: '#fcb42d'
                }
              }
            ]
            // 画线
            this.$mapSdk().createMvMapLineLayer(lines)
            // 打点
            const pointData = {
              icon: 'zhdd-gs-sgyh',
              path: centerPath,
              name: 'G2 K810+000-847+000 京沪高速',
              size: [30, 35],
              hasClickStatus: true,
              offset: [-15, -35],
              eventType: 'JEB1',
              // type: 'jjjsg',
              detail: [
                { title: '施工路段：', value: 'G2 京沪高速' },
                { title: '施工方向：', value: '北京往上海' },
                { title: '施工时间：', value: '2022年12月1日~2022年12月31日' },
                { title: '施工范围：', value: 'K810+000~847+000 ' },
                { title: '施工单位：', value: '京沪公司' },
                { title: '施工描述：', value: '道路扩宽施工，单车道通行' }
              ]
            }
            const config = { type: 'jjjsg' }
            this.$mapSdk().createMvMapMarkerLayer([pointData], config, (e, data) => {
              this.pointClick(e, data, config)
            })
            // 画圆
            const circle = new AMap.Circle({
              center: new AMap.LngLat(centerPath[0], centerPath[1]), // 圆心位置
              radius: 20000 // 半径 单位m
            })
            const bounds = circle.getBounds()
            const imageData = {
              url: require('../../assets/images/event/yellow-scope.png'),
              southWest: [bounds.southwest.lng, bounds.southwest.lat],
              northEast: [bounds.northeast.lng, bounds.northeast.lat]
            }
            const imgConfig = {
              zooms: [8, 14],
              zIndex: 2
            }

            this.$mapSdk().createMvMapImgLayer(imageData, imgConfig)
            this.$mapSdk().setMvMapCenterAndZoom(centerPath, 11)
          } else {
            this.$message.error('暂无路线数据')
          }
        })
        .catch(e => {
          this.$message.error('数据获取失败')
        })
    },

    /**
     *  创建公路事件处置点位
     **/
    createEventHandlePoint() {
      // 公路图标
      const eventTypeArr = {
        TAA1: { icon: 'gl-sgzh', name: '事故灾害' },
        TBA1: { icon: 'gl-eltq', name: '恶劣天气', isLine: true },
        TCA1: { icon: 'gl-dzzh', name: '地质灾害' },
        TDA1: { icon: 'gl-tfqt', name: '突发其他' },
        JEA1: { icon: 'gl-sgyh', name: '施工养护', isLine: true, isPlan: true },
        JFA1: { icon: 'gl-zdhd', name: '重大活动', isLine: true, isPlan: true },
        JGA1: { icon: 'gl-jhqt', name: '计划其他', isLine: true, isPlan: true },

        // 高速
        TAB1: { icon: 'zhdd-gs-jtsg', name: '交通事故' },
        TAB2: { icon: 'zhdd-gs-clgz', name: '车辆故障' },
        JEB1: { icon: 'zhdd-gs-sgyh', name: '施工养护', isLine: true, isPlan: true },
        TBB1: { icon: 'zhdd-gs-eltq', name: '恶劣天气', isLine: true, isPlan: true },
        TDB2: { icon: 'zhdd-gs-zaw', name: '障碍物' },
        TDB1: { icon: 'zhdd-gs-dll', name: '大流量' },
        JGB1: { icon: 'zhdd-gs-jtgz', name: '交通管控', isLine: true, isPlan: true }
      }

      const params = {
        unitId: this.userInfo.orgInfos ? this.userInfo.orgInfos[0].orgId : null, // '11449621992c4f0093c433ca4d550010'
        roadSysType: this.$store.state.config.roadType,
        companyType: get(this.$store.state, 'user.bussinessType'),
        page: 1,
        limit: 9999
      }
      eventApi.getHighwayEventList(params).then(res => {
        const data = get(res, 'data.data', res.data || [])
        data.forEach(item => {
          if (!item.eventPositionList || !item.eventPositionList.length) return

          const config = { type: 'glsjcz' }
          const dataDetail = item.eventPositionList[0] || {} // 位置数据详情
          const startStake = dataDetail.eventStartMileageK + '+' + dataDetail.eventStartMileageM // 开始桩号
          const endStake = dataDetail.eventEndMileageK + '+' + dataDetail.eventEndMileageM // 结束桩号
          const eventStartTime = item.eventStartTime ? dayjs(item.eventStartTime).format('YYYY-MM-DD HH:mm:ss') : ''
          const eventEndTime = item.eventEndTime ? dayjs(item.eventEndTime).format('YYYY-MM-DD HH:mm:ss') : ''
          const isPlan = eventTypeArr[item.customEventType].isPlan // 是不是计划
          const isLine = eventTypeArr[item.customEventType].isLine // 点还是线
          const position = isLine
            ? `${dataDetail.eventRoadId} K${startStake}-K${endStake}`
            : `${dataDetail.eventRoadId} K${startStake}`

          // // 事件所在位置
          // const position =
          //     ? `${dataDetail.eventRoadId} K${startStake}-K${endStake}`
          //     : `${dataDetail.eventRoadId} K${startStake}`
          // 事件点位信息
          const pointData = {
            ...item,
            icon: eventTypeArr[item.customEventType] && eventTypeArr[item.customEventType].icon,
            path: [],
            name: position,
            size: [36, 40],
            hasClickStatus: true,
            offset: [-15, -35],
            zIndex: 109,
            detail: [
              { title: '所在位置：', value: position },
              { title: '方向：', value: '' },
              { title: '事件描述：', value: item.eventDesc }
            ],
            direction: dataDetail.eventRoadDirection,
            titleName: eventTypeArr[item.customEventType] && eventTypeArr[item.customEventType].name
          }
          //  线的处理
          if (isLine) {
            pointData.name = position
            if (dataDetail.lineString) {
              const lines = JSON.parse(dataDetail.lineString)
              pointData.path = lines[parseInt(lines.length / 2)]
              this.$mapSdk().createMvMapLineLayer({
                path: lines,
                name: position,
                config: {
                  zIndex: 105,
                  lineWidth: 8,
                  lineColor: '#fcb42d',
                  selectWidth: 10,
                  selectColor: '#fcb42d'
                }
              })
            }
          } else {
            // 点的处理
            pointData.path = [dataDetail.eventLon, dataDetail.eventLat]
          }
          // 计划字段
          if (isPlan) {
            pointData.detail.unshift(
              { title: '预计开始时间：', value: eventStartTime },
              { title: '预计结束时间：', value: eventEndTime }
            )
            // 突发字段
          } else {
            pointData.detail.unshift({ title: '事发时间：', value: eventStartTime })
          }
          if (Array.isArray(pointData.path) && pointData.path[0] && pointData.path[1]) {
            this.$mapSdk().createMvMapMarkerLayer(pointData, config, (e, data) => {
              this.pointClick(e, data, config)
            })
          }
        })
      })
    },

    /** *
     * @desc  获取路线
     * @param params  请求参数
     *
     ***/
    getLineLatLonList(newValue = {}, params) {
      return new Promise((resolve, reject) => {
        baseServiceApi
          .getLineLatLonList(params)
          .then(res => {
            if (res.data && res.data.length) {
              const dataArr = res.data.map(i => {
                const path = i.lonLat.split(';').map(i => i.split(','))
                return {
                  name: newValue.text,
                  path,
                  upDown: i.upDown,
                  config: {
                    lineWidth: 8,
                    lineColor: newValue.lineColor || '',
                    selectWidth: 10,
                    selectColor: newValue.lineColor || ''
                  }
                }
              })
              resolve(dataArr)
              return
            }
          })
          .catch(e => {
            reject()
          })
      })
    },

    /** *
     * @desc  获取摄像机、情报板并打点
     * @param params  请求参数
     * @param type    类型  6摄像机、7情报板
     *
     ***/
    getBaseInfoList(params, type = '') {
      return new Promise((resolve, reject) => {
        baseServiceApi
          .getBaseInfoList(params)
          .then(res => {
            if (res.data && res.data.length) {
              res.data = res.data.map((item, index) => {
                const iconType = item.roadSysType == 1 ? 'zhdd-gs-' : 'zhdd-gl-'
                const newObj = {
                  ...item,
                  id: item.resourcesId,
                  cameraId: item.resourcesId,
                  roadType: item.roadSysType,
                  icon: iconType + type,
                  path: [item.lng, item.lat],
                  name: item.resourcesName,
                  hasClickStatus: true,
                  size: [30, 35],
                  offset: [-15, -35]
                }
                return newObj
              })
              resolve(res.data)
              return
            }
          })
          .catch(e => {
            reject()
          })
      })
    },

    /** *
     *   暂时不用！
     * @desc  获取事件周边路线线、摄像机、情报板
     * @param params  请求参数
     * @param type    类型  6摄像机、7情报板
     *
     ***/
    getEventBaseInfo(data) {
      const path = data.heatModelList.map(item => [item.lon, item.lat])
      const centerPath = path[Math.floor(path.length / 2)]
      if (!centerPath[0] || !centerPath[1]) return
      // 施工画线、周边摄像机
      if (['JEB1'].includes(data.eventType)) {
        const startStake = data.startStake.replace(new RegExp('K'), '').split('+').join('.')
        const endStake = data.endStake.replace(new RegExp('K'), '').split('+').join('.')

        const params = {
          roadNum: data.roadId, //  string 是 示例值：G2说明：路段编号
          startStake: startStake, //  number 是 示例值：450说明：开始桩号
          endStake: endStake //  number 是 示例值：1000说明：结束桩号
        }
        // 获取路线
        this.getLineLatLonList({ text: '施工', lineColor: '#fcb42d' }, params).then(res => {
          if (res && res.length) {
            this.lineInfo = this.$mapSdk().createMvMapLineLayer(res, (e, data) => {})
          }
        })
        // 获取摄像机
        params.resourceType = 6
        this.getBaseInfoList(params, 'sxj').then(res => {
          const result = useComputedDistanceRow(data.path, res)
          const config = { type: 'sxj' }
          this.broundBaseInfo = this.$mapSdk().createMvMapMarkerLayer(res, config, (e, res) => {
            this.pointClick(e, res, config)
          })
        })
      } else {
        // 获取摄像机
        baseServiceApi.getLonlatInfoList({ lon: centerPath[0], lat: centerPath[1], resourceType: 6 }).then(res => {
          if (res.data && res.data.length) {
            let result = res.data.filter(i => i.roadSysType === 1) // 只要高速的
            result = useComputedDistanceRow(centerPath, result).splice(0, 2)
            result = result.map(item => {
              return {
                ...item,
                id: item.resourcesId,
                cameraId: item.resourcesId,
                roadType: item.roadSysType,
                icon: 'zhdd-gs-sxj-active',
                path: [item.lng, item.lat],
                name: item.resourcesName,
                hasClickStatus: true,
                size: [30, 35],
                offset: [-15, -35]
              }
            })
            const config = { type: 'sxj' }
            this.videoInfo = this.$mapSdk().createMvMapMarkerLayer(result, config, (e, res) => {
              this.pointClick(e, res, config)
            })
          }
        })
      }
      const circle = new AMap.Circle({
        center: new AMap.LngLat(centerPath[0], centerPath[1]), // 圆心位置
        radius: 5000 // 半径 单位m
      })

      const bounds = circle.getBounds()
      const imageData = {
        url: require('../../assets/images/event/red-scope.png'),
        southWest: [bounds.southwest.lng, bounds.southwest.lat],
        northEast: [bounds.northeast.lng, bounds.northeast.lat]
      }
      const config = {
        zooms: [8, 14],
        zIndex: 2
      }

      this.imgInfo = this.$mapSdk().createMvMapImgLayer(imageData, config)
    }
  }
}
</script>

<style scoped lang="less">
@bgColor: #e1eafa;

.map-wrapper {
  .mv-map-container {
    width: 100vw;
    height: 100vh;
  }
}

.map-menu-box {
  width: 0;
  height: 0;
  .map-menu-container {
    margin-left: 60px;
    display: flex;
    position: absolute;
    overflow: inherit;

    .mv-map-icon-container {
      margin-right: 10px;
    }
  }
}

.cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background: #e1eafa5c;
  pointer-events: none;
  box-shadow: inset 0 0 200px 20px @bgColor;

  > div {
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0;
  }

  .left {
    left: 0;
    background: linear-gradient(to right, @bgColor, transparent);
  }

  .right {
    right: 0;
    background: linear-gradient(to left, @bgColor, transparent);
  }
}

/deep/.amap-copyright {
  display: none !important;
}
// .map-around-cameras {
//   // height: 260px;
//   // width: 200px;
// }

.icon-clgj {
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/.mv-map-icon-img-box {
    width: 66px !important;
    height: 34px !important;
  }
}
</style>
